<template>
	<!-- 新的头部标题 -->
	<view class="new_head" :class="isPadding?'':'padding_no'">
		<view class="help_head">
			<view class="head_top" :style="{height: statusBarHeight}"></view>
			<view class="head_content" :class="isBorder?'head_border':''">
				<view class="head_image"  @tap.stop="tapleft" v-if="isLeft">
					<image v-if="isLeft" src="/static/images/back.png" mode="aspectFit"></image>
				</view>
				<view class="head_image"  v-if="!isLeft">
					<view class="head_img"></view>
				</view>
				<view class="help_title f50">
					{{title}}
				</view>
				<view class="head_image">
					<view class="head_img" v-if="!isShowLocation"></view>
					<view  v-if="isShowLocation" class="head_location" @tap="tapLocation" >
						<image src="/static/images/location03.png" mode=""></image>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'newHead',
		props: {
			// 当前页面标题
			title: {
				type: String,
				default: ''
			},
			// 是否需要下边框线
			isBorder: {
				type: Boolean,
				default: false
			},
			// 是否显示返回
			isLeft: {
				type: Boolean,
				default: true
			},
			// 是否需要自定义返回操作, ,如有网络的巡检和新增 点击返回按钮
			isMyBack: {
				type: Boolean,
				default: false
			},
			// 是否需要padding
			isPadding: {
				type: Boolean,
				default: true
			},
			// 是否显示定位图标
			isShowLocation: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return{
				// 状态栏高度
				statusBarHeight: '30rpx',
			}
		},
		mounted() {
			this.getStatusHeight()
		},
		methods: {
			/**
			 * 获取状态栏高度
			 */
			getStatusHeight() {
				// console.log('获取状态栏高度 head.vue ')
				let that = this;
				uni.getSystemInfo({
				    success: function (res) {
				        let statusBarHeight = res.statusBarHeight + 'px';
						that.statusBarHeight = statusBarHeight || '30rpx';
				    }
				})
			},
			
			/**
			 * 点击返回
			 */
			tapleft() {
				if(this.isMyBack){
					this.$emit('myBack')
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
				
			},
			
			/**
			 * 点击定位
			 * 打开地图获取定位
			 */
			tapLocation() {
				let that = this;
				uni.chooseLocation({
				    success: function (res) {
						console.log('点击定位', res)
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
						
						let data = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						that.$emit('userChooseLocation', data)
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	.new_head{
		padding-top: 90rpx;	
	}
	.padding_no{
		padding: 0;
	}
	.help_head{
		// height: 90rpx;
		position: fixed;
		
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		.head_top{
			height: 25rpx;
			background-color: #0D4483;
		}
		.head_content{
			height: 65rpx;
			
			display: flex;
			background-color: #2579D8;
			.head_image{
				padding: 0 24rpx;
				height: 65rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.head_location{
					image{
						width: 30rpx;
						height: 30rpx;
					}
				}
				image{
					width: 30rpx;
					height: 30rpx;
				}
				.head_img{
					width: 30rpx;
				}
			}
			.help_title{
				width: 594rpx;
				height: 65rpx;
				margin: auto;
				text-align: center;
				line-height: 65rpx;
				color: #fff;
				font-size: 30rpx;
			}
		}
		.head_border{
			border-bottom: 1px solid #dcdcdc;
		}
	}
</style>
